最近在用Vue做项目,对于Vue的组件总有点模棱两可的理解,今天忽然发现是对父组件和子组件在概念上有理解的问题,刚刚仔细研究了一下,颇有所得,记录一下。

我在Vue的官网和书上没有找到父子组件在概念上的解释,但想要理解并且运用好组件,在概念上理解父子组件是很重要的。
一般来说,对于父组件的理解就是html中的自定义标签,子组件是Vue自定义组件中的模版标签,比如对于如下代码:

<div id="app36">
        <testcomponent></testcomponent>
    </div>
    
    <script>
        Vue.component('testcomponent', {
            data: function(){
                return {count: 0}
            },
            template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
        })

    var app=new Vue({
            el: '#app35'
        })
    </script>

一般都会觉得父组件是<testcomponent></testcomponent>,或加上包含他的<div id="app36">,子组件是template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
这种理解虽然勉强正确,但是有很大问题,想要理解父子组件或兄弟组件之间的通信,这样的理解远远不够。

真正的父组件或子组件,应该站在更底层的角度去理解,我目前对父组件的理解是: 父组件是已被挂载的vue实例,而子组件,是被这个实例调用的自定义组件本身,而不仅仅是自定义标签或自定义组件中的模版标签。
在这个例子中,父组件是var app1=new Vue({el: '#app36'}), 而子组件是自定义的组件整体。

我为什么会有这样的理解?说到这个问题,我需要提到后端的思维模式,比如java,java里也有父类子类,而对java来说,所谓的子类并不仅仅是带着父类方法,还有虚拟机中一整套的父类的定义,这是在内存中编译好的一处空间。我对于Vue目前并不熟悉,但它在很多方面类似后端编程语言,所以站在底层去思考还是很有必要的。


yizheng
301 声望27 粉丝

一蓑烟雨任平生